<template>
    <div>
        <div v-if="myloading" class="loading">
            <van-loading size="100px" color="#ec344e" />
        </div>
        <div class="focus" v-else>
            <div class="focus_header">
                <h3>厨艺天堂,快去展示自己的厨艺吧~</h3>
                <p>你关注的人的动态会出现在这里</p>
                <p>为你推荐了一些有趣的人,快关注TA们吧</p>
            </div>
            <div class="focus_final" v-for="(item,i) in banners" :key="i">
                <div class="final_header">
                    <div class="left">
                        <img :src="item.u.p" alt="" class="head_photo">
                        <div class="left_fonts">
                            <div class="fonts_top">
                                <span class="user_name">{{ item.u.n }}</span>
                                <span class="level">Lv.{{ item.u.lvl }}</span>
                            </div>
                            <div class="fonts_bottom">
                                <span class="nums1">{{ item.u.followers_count_text }}</span>
                                <span class="nums2">{{ item.u.recipes_count_text }}</span>
                            </div>   
                        </div>
                    </div>
                    <div class="right">
                        <span>关注</span>
                    </div>
                </div>
                <img :src="item.img" alt="" class="recipes_photo" @click="goDetail(item.item_id)">
                <div class="final_final">
                    <div class="final_final_header">
                        <div class="final_photos">
                            <div class="final_photo" v-for="(p,t) in item.collect_users" :key="t">
                                <img :src="p.p" alt="">
                            </div>
                        </div>
                        <div class="final_text">{{ item.collect_count_text }}</div>
                    </div>
                    <div class="final_final_bottom">
                        <div>{{ item.n }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
    // 做网络请求，导入api
    import { focus } from '../../api/index'
    
    export default {
        data(){
            return {
                banners: [],
                id: '',
                myloading:false
            }
        },
    
        // 初始化
       async created(){
            this.myloading = true; 
            await focus()
            .then(
                content=> {
                    console.log('--->',content.result.rfs);
                    let banners = content.result.rfs;
                    this.banners = banners;
                }
            )
            // 请求之后
            setTimeout(() => {
                // 隐藏loading
                this.myloading = false;
            }, 500);
        },
        methods: {
            goDetail(id){
                if(id ==''){
                    return false;
                }
                console.log(id);
                this.$router.push({
                    name: 'recipesDetail',
                    params: { keyword: id},
                });
            }
        },
    }
</script>

<style lang="less">
@import '../../common/less/varible.less';
    .focus{
        width: 100%;
        margin-bottom: 80px;
        .focus_header{
            background-color: #fafafa;
            // height: 80px;
            padding: 10px;
            h3{
                font-size: 14px;
                margin-bottom: 10px;
            }
            p{
                font-size: 12px;
                color: #a2a2a2;
            }
        }
        .focus_final{
            width: 100%;
            .final_header{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                width: 100%;
                height: 50px;
                .left{
                    display: flex;
                    img{
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-top: 7px;
                    }
                    .left_fonts{
                        .fonts_top{
                            .user_name{
                                font-size: 14px;
                                margin-left: 10px;
                                font-weight: 700;
                            }
                            .level{
                                font-size: 10px;
                                color: #cca645;
                                margin-left: 10px;
                            }
                        }
                        .fonts_bottom{
                            font-size: 12px;
                            color: #a2a2a2;
                            margin-left: 10px;
                        }
                    }
                }

                .right{
                    background-color: @bgColor;
                    text-align: center;
                    width: 50px;
                    height: 25px;
                    line-height: 25px;
                    font-weight: 600;
                    border-radius: 25px;
                    font-size: 12px;
                    color: #fff;
                }
            }

            .recipes_photo{
                width: 100%;
                display: block;
            }

            .final_final{
                .final_final_header{
                    width: 100%;
                    display: flex;
                    padding: 10px;
                    .final_photos{
                        display: flex;
                        .final_photo{
                            img{
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                            }
                        
                        }
                    }
                    .final_text{
                        margin-left: 10px;
                        font-size: 12px;
                    }
                }
                .final_final_bottom{
                    padding: 0 10px;
                    width: 100%;
                    div{
                        font-size: 12px;
                    }
                }
            }
        }
    }
    .loading{
        width: 100%;
        margin-top: 100px;
        padding-left: 35%;
    }
</style>